<script>
export default {
  name: "Detail",
  props:['id','title'],
  mounted() {
    console.log("Component mounted.")
  },
  beforeDestroy() {
    console.log(" will destroy component.")
  }
}
</script>

<template>
  <ul>
<!--query参数是指通过？&拼接在路径后面的参数，使用query接受    -->
    <h1>quer参数</h1>
    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息标题：{{ $route.query.title }}</li>
    <hr>

    <h1>param参数</h1>
    <li>消息编号：{{ $route.params.id }}</li>
    <li>消息标题：{{ $route.params.title }}</li>
    <hr>
    <h1>param参数从props取</h1>
    <li>消息编号：{{id}}</li>
    <li>消息标题：{{title}}</li>

  </ul>
</template>

<style scoped>

</style>